<template>
	<view class="relative">
		<uni-nav-bar title="生成收款码" left-icon="back" @clickLeft="$tab.back()" :fixed="true" :statusBar="true" :border="false" backgroundColor="#FF561D" color="#FFF"></uni-nav-bar>
		
		<view class="nav-bg">
			
		</view>
		
		<view class="content px-20">
			<view class="form">
				<input type="text" class="input" placeholder="请输入名称" placeholder-style="color:#D46F22" v-model="form.name" />
				<view class="input relative flex items-center">
					<input type="number" class="w-full" placeholder="请输如让利比例" placeholder-style="color:#D46F22" v-model="form.rate" />
					<view class="bai">
						%
					</view>
				</view>
			</view>
			
			<view class="confirm text-center text-FFF" @click="confirm">
				点击生成收款二维码
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					name:"",
					rate:"",
				}
			};
		},
		methods:{
			async confirm(){
				if(this.form.rate > 90 || this.form.rate < 1){
					this.$modal.msg('让利比例范围为1-90!')
					return
				}
				const res = await this.$Api.store.offlineOrderQrCode(this.form)
				console.log(res)
				uni.setStorageSync('code',res.data)
				this.$tab.nav(`/pages/mine/store/code?name=${this.form.name}`)
			},
		}
	}
</script>

<style lang="scss">
	.nav-bg{
		height: 396rpx;
		background: linear-gradient( 180deg, #FF561D 33%, #F8F8F8 100%);
	}
	
	.content{
		position: absolute;
		top: 240rpx;
		left: 0;
		z-index: 1;
		width: 100%;
		
		.form{
			height: 562rpx;
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/store/xiangxixinxi.png) no-repeat;
			background-size: 100% 100%;
			padding: 154rpx 34rpx 0 34rpx;
			
			.input{
				width: 642rpx;
				height: 88rpx;
				background: #F8F8F8;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 88rpx;
				margin-bottom: 32rpx;
			}
			
			.bai{
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		
		.confirm{
			width: 662rpx;
			height: 88rpx;
			background: linear-gradient( 180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			line-height: 88rpx;
			margin: 80rpx auto 0;
		}
	}
</style>
